<template>
    <el-card class="mb-20" shadow="hover">
        <template #header>
            <span>出库单审核</span>
            <el-button type="primary" icon="el-icon-refresh" @click="fetchList">刷新列表</el-button>
        </template>
        <el-form :model="searchForm" inline>
            <el-form-item label="申请时间">
                <el-date-picker
                        v-model="searchForm.applyTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="请选择状态">
                    <el-option label="待审核" value="pending"></el-option>
                    <el-option label="已通过" value="approved"></el-option>
                    <el-option label="已拒绝" value="rejected"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="fetchList">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="reviewList" stripe border style="width: 100%">
            <el-table-column prop="applyId" label="申请单号"></el-table-column>
            <el-table-column prop="warehouseName" label="仓库名称"></el-table-column>
            <el-table-column prop="department" label="领用部门"></el-table-column>
            <el-table-column prop="applyTime" label="申请时间"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag :type="getTagType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" icon="el-icon-view" @click="viewDetail(scope.row.applyId)">查看详情</el-button>
                    <el-button
                            v-if="scope.row.status === 'pending'"
                            type="success"
                            icon="el-icon-check"
                            @click="approve(scope.row.applyId)"
                    >通过</el-button>
                    <el-button
                            v-if="scope.row.status === 'pending'"
                            type="danger"
                            icon="el-icon-close"
                            @click="reject(scope.row.applyId)"
                    >拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        ></el-pagination>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                applyTime: [],
                status: ''
            },
            reviewList: [],
            total: 0,
            currentPage: 1,
            pageSize: 10
        };
    },
    methods: {
        fetchList() {
            // 模拟接口请求
            this.reviewList = [
                {
                    applyId: '123456',
                    warehouseName: '仓库A',
                    department: '销售部',
                    applyTime: '2025-03-13',
                    status: 'pending'
                },
                {
                    applyId: '654321',
                    warehouseName: '仓库B',
                    department: '研发部',
                    applyTime: '2025-03-12',
                    status: 'approved'
                }
            ];
            this.total = this.reviewList.length;
        },
        getTagType(status) {
            if (status === 'approved') {
                return 'success';
            } else if (status === 'rejected') {
                return 'danger';
            }
            return 'info';
        },
        getStatusText(status) {
            if (status === 'pending') {
                return '待审核';
            } else if (status === 'approved') {
                return '已通过';
            }
            return '已拒绝';
        },
        viewDetail(applyId) {
            this.$message.info(`查看申请单号为 ${applyId} 的详情`);
        },
        approve(applyId) {
            this.$confirm('确认通过该出库单申请吗？', '提示', {
                type: 'success'
            }).then(() => {
                this.$message.success('已通过该出库单申请');
                this.fetchList();
            });
        },
        reject(applyId) {
            this.$prompt('请输入拒绝原因', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(({ value }) => {
                this.$message.success(`已拒绝该出库单申请，原因：${value}`);
                this.fetchList();
            }).catch(() => {
                this.$message.info('取消拒绝操作');
            });
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.fetchList();
        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage;
            this.fetchList();
        }
    },
    mounted() {
        this.fetchList();
    }
};
</script>

<style scoped>
.mb-20 {
    margin-bottom: 20px;
}
</style>